<form [formGroup]="formGroup" (submit)="deployStream()">
  <p>Enter the list of properties into the text area field below. Alternatively, you can also select a file in your local file system, which is used to populate the text area field.</p>
  <div class="form-textarea">
    <div class="numbers">
      <ng-template ngFor let-item [ngForOf]="lines">
        <div class="number">
          <span [class.invalid]="!item.valid">{{ item.label }}</span>
        </div>
      </ng-template>
    </div>
    <textarea dataflowAutoResize autofocus formControlName="input"></textarea>
  </div>
  <div class="input-file">
    <label class="btn-file btn btn-default" placement="bottom"
           tooltip="Please provide a text file containing properties. This will be used to populate the text area above.">
      <input formControlName="file" id="propertiesFile" name="propertiesFile" type="file"
             (change)="fileChange($event)"/>
      Import a local file
    </label>
  </div>
  <div class="footer-actions" style="text-align: center;padding:1rem 0;">
    <a id="btn-cancel" class="btn btn-default" routerLink="/streams">Cancel</a>
    <button id="btn-export" type="button" class="btn btn-primary" [disabled]="!isExportable" (click)="exportProps()">
      Export
    </button>
    <button id="btn-deploy" type="submit" class="btn btn-primary" [disabled]="!isSubmittable">
      Deploy the stream
    </button>
  </div>
</form>
